<template>
	<view class="agentTodoList">
		<view v-if="todoList.length == 0" class="text-lg text-center text-gray">暂无数据</view>
		<!-- <uni-collapse class="container">
			<uni-collapse-item v-for="(item, index) in todoList" :key="index" :title="item.title" :showAnimation="true">
				<view class="listItem flex align-center solid-bottom" v-for="(sub, key) in item.children" :key="key" @click="listItemClick(sub)">
					<view class="listItemTitle flex-sub">
						<view>{{ sub.Title }}</view>
						<view class="text-sm text-gray">所在节点：{{ sub.NodeName }}</view>
					</view>
					<view class="cuIcon-right listItemRightIcon"></view>
				</view>
			</uni-collapse-item>
		</uni-collapse> -->
		<view>
			<scroll-view scroll-x class="bg-white nav ">
				<view class="cu-item" :class="index == curTab ? 'text-blue cur' : ''" v-for="(item, index) in todoList" :key="index" @tap="tabChange(index)" :data-id="index">
					{{ item.title }}
				</view>
			</scroll-view>
		</view>
		<view>
			<scroll-view scroll-y="true" class="scrollView listCon" :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="scroll">
				<view class="listItemCard" v-for="(item,key) in showList" :key="item.WorkID">
					<view class="listItemCon" @click="listItemClick(item)">
						<view class="listItemIconCon "><text class="cuIcon-edit listItemIcon" :style="{ color: statusFilter(item) }" /></view>
						<view class="listItemContentCon">
							<view class="listItemTitle">{{ item.Title }}</view>
						</view>
						<view class="listItemStatusCon" :style="{ color: statusFilter(item) }">{{ item.NodeName }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
import qs from 'qs';
export default {
	data() {
		return {
			todoList: [],
			curTab: 0,
			showList: [],
			scrollTop: 0,
			old: {
				scrollTop: 0
			}
		};
	},
	onShow() {
		this.webUserInit()
			.then(res => {
				console.log(res);
				if (res && res.No) {
					this.getList();
					return;
				} else {
					return this.loginByNo({
						no: this.$store.state.user.userInfo.No
					});
				}
			})
			.then(res => {
				console.log(res);
				if (res && res.code == '000000') {
					this.getList();
				}
			})
			.catch(err => {
				console.log(err);
			});
	},
	methods: {
		...mapActions({
			webUserInit: 'user/webUserInit',
			getTodoList: 'agent/getTodoList',
			loginByNo: 'user/loginByNo'
		}),
		...mapMutations({
			setAgentTodoCache: 'agent/setAgentTodoCache'
		}),
		statusFilter(item) {
			let value = item.FK_Node;
			if (item.FK_Flow == '009') {
				let color = {
					901: '#409eff', //开始
					902: '#E6A23C', //确认订单
					903: '#9BEFEC', //成功派单
					904: '', //
					905: '#ffe78f', //预约确认
					906: '#67C23A', //服务完成
					907: 'red', //服务取消
					908: '#E6A23C', //确认订单
					909: '#9BEFEC', //成功派单
					910: '#ffe78f' //预约确认
				};
				return color[value] || 'black';
			} else {
				return 'black';
			}
		},
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		listItemClick(item) {
			console.log(item);
			if (item.FK_Flow == '008') {
				this.setAgentTodoCache(item);
				uni.navigateTo({
					url: `/agentPages/agent/agentTodoDetail`
				});
			} else if (item.FK_Flow == '009') {
				let params = {
					FK_Flow: item.FK_Flow,
					FK_Node: item.FK_Node,
					WorkID: item.WorkID,
					FID: item.FID,
					type: 'detail',
					hideSend: 'false'
				};
				uni.navigateTo({
					url: `/agentPages/agent/agentFlowDetail?${qs.stringify(params)}`
				});
			} else {
				uni.showToast({
					title: '该功能尚未实装',
					icon: 'none'
				});
			}
		},
		tabChange(e) {
			this.curTab = e;
			this.showList = this.todoList[e].children || [];
		},
		getList() {
			this.getTodoList()
				.then(res => {
					console.log(res);
					let cacheObj = {};
					let arr = [];
					if (res && typeof res == 'object' && res.length > 0) {
						for (let i = 0, len = res.length; i < len; i++) {
							if (cacheObj[`${res[i].FK_Flow}`]) {
								cacheObj[`${res[i].FK_Flow}`].children.push(res[i]);
							} else {
								cacheObj[`${res[i].FK_Flow}`] = {
									title: res[i].FlowName,
									children: [res[i]]
								};
							}
						}
						console.log(cacheObj);
						for (const key in cacheObj) {
							if (cacheObj.hasOwnProperty(key)) {
								const element = cacheObj[key];
								arr.push(element);
							}
						}
						this.todoList = arr;
						if (arr.length > 0) {
							this.showList = arr[0].children;
						}
					} else {
						this.todoList = [];
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="less">
@contentFontSize: 24rpx;
@primaryColor: #264e86;
.agentTodoList {
	.uni-collapse-cell--open {
		background-color: #cce6ff;
	}
	.listItem {
		background-color: white;
		min-height: 92rpx;
		padding: 8rpx 0;
		.listItemTitle {
			padding-left: 24rpx;
		}
		.listItemRightIcon {
			padding: 0 24rpx;
			font-size: 42rpx;
		}
	}
	.scrollView {
		height: calc(100vh - 90rpx);
		
	}
	.listCon {
		background-color: #eee;
		padding: 12rpx 24rpx 0 24rpx;
	}
	.listItemCard {
		margin-bottom: 24rpx;
		background-color: white;
		padding: 24rpx;
		.listItemCon {
			display: flex;
			padding-top: 8rpx;
			.listItemIconCon {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 16rpx;
				.listItemIcon {
					font-size: 60rpx;
				}
			}
			.listItemContentCon {
				flex: 1;
				padding: 0 8rpx;
				.listItemContentIcon {
					color: @primaryColor;
				}
				.listItemTitle {
					font-size: 30rpx;
					color: @primaryColor;
				}
				.listItemNameCon {
					display: flex;
					align-items: center;
					font-size: @contentFontSize;
					padding: 6rpx 0;
					view {
						flex: 1;
					}
				}
				.listItemAddressCon {
					font-size: @contentFontSize;
					padding-bottom: 6rpx;
				}
				.listItemTimeCon {
					font-size: @contentFontSize;
					padding-bottom: 6rpx;
				}
			}
			.listItemStatusCon {
				font-size: 26rpx;
			}
		}
	}
}
</style>
